<template>
  <el-menu
    active-text-color="#ffd04b"
    background-color="rgb(61, 95, 129)"
    :default-active="defaultActive"
    text-color="#fff"
    router
  >
    <el-menu-item index="/index/home">
      <el-icon><Menu /></el-icon>
      <span>首页</span>
    </el-menu-item>

    <el-sub-menu index="2">
      <template #title>
        <el-icon><Setting /></el-icon>
        <span>系统管理</span>
      </template>
      <el-menu-item index="/index/menu">菜单管理</el-menu-item>
      <el-menu-item index="2-1">角色管理</el-menu-item>
      <el-menu-item index="2-1">管理员管理</el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="3">
      <template #title>
        <el-icon><Goods /></el-icon>
        <span>商品管理</span>
      </template>
      <el-menu-item index="3-1">商品规格</el-menu-item>
      <el-menu-item index="3-1">商品分类</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
 import { ref,onMounted } from "vue"
 import { useRoute } from "vue-router"

 let defaultActive = ref("");
 let route = useRoute();


 //页面加载完成后
 onMounted(()=>{
    defaultActive.value = route.path;
 })


</script>

<style>
</style>